<script setup>
const props = defineProps({
    imgUrl:{
        type: String,
        required: true
    },
    title:{
        type: String,
        required: true
    }
})
</script>

<template>
  
<div class="box-card">
  <div class="img-wrapper">
  <el-image :src="imgUrl" style=" width: 35px;height: 35px;"></el-image>
</div>
<div class="name-wrapper">
  <span>{{title}}</span>
</div>
</div>
</template>
<style scoped>
.box-card{
  width: 200px;
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  border: 3px solid lightblue;
  border-radius: 50px;
}
.img-wrapper{
  margin: 5px 0 0 7px;
  /* background-color: red; */
}
.name-wrapper{
  width: 100px;
  height: inherit;
  display: flex;
  align-items: center;
  font-size: 20px;
  /* background-color: lightblue; */
}
</style>
